<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.page"
    :page-sizes="[5, 10, 20, 50]"
    :page-size="page.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.counts"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'MyPagination',
  props: {
    page: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleSizeChange (val) {
      this.$emit('handleSizeChange', val)
    },
    // 当前页发生变化时触发
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

<style lang="less" >
  .el-pagination{
    text-align: right;
    .el-pager li{
      min-width: 30px;
      background-color: #f4f4f5;
      margin-right: 4px;
      &.active{
        background-color: #409eff;
        color: #fff;
      }
    }
  }
</style>
